<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <title>login</title>
    <link rel="stylesheet" href="/static/layim-v3.7.6/src/css/layui.css">
    <style>
        body{margin: 0 auto;width: 1200px;padding-top: 300px}
        .layui-form-radio,.layui-form-radio i {
            margin-right: 0;
        }
    </style>
</head>
<body>

<fieldset class="layui-elem-field layui-field-title">
    <legend>登录</legend>
</fieldset>

<div class="layui-tab">
    <ul class="layui-tab-title">
        <li class="layui-this">新账号</li>
        <li>已有账号</li>
    </ul>
    <div class="layui-tab-content">
        <div class="layui-tab-item layui-show">
            <form class="layui-form" onsubmit="return false">
                <div class="layui-form-item">
                    <label class="layui-form-label">昵称</label>
                    <div class="layui-input-inline" style="width: 400px">
                        <input type="text" name="username" required placeholder="如果昵称不存在，则会创建一个" class="layui-input" style="width: 400px">
                    </div>
                    <div class="layui-input-inline">
                        <button type="button" class="layui-btn layui-btn-danger" id="rankName">随机</button>
                    </div>
                </div>

                <div class="layui-form-item">
                    <label class="layui-form-label">头像</label>
                    <div class="layui-input-block">
                        <?php for($i=1; $i < 41; $i++): ?>
                        <input type="radio" name="header" title=" " value="<?=$i?>" id="h<?=$i?>" checked>
                        <img src="/upload/header/h<?=$i?>.jpg" width="60" height="60">
                        <?php endfor;?>
                    </div>
                </div>

                <div class="layui-form-item">
                    <div class="layui-input-block">
                        <button type="submit" class="layui-btn submit" data-id="0">确定</button>
                    </div>
                </div>
            </form>
        </div>

        <div class="layui-tab-item" style="min-height: 350px">
            <form class="layui-form" onsubmit="return false">
                <div class="layui-form-item">
                    <label class="layui-form-label">选择账号</label>
                    <div class="layui-input-inline" style="width: 400px">
                        <select name="user_id">
                            <?php foreach($user as $vo): ?>
                            <option value="<?=$vo->id?>"><?=$vo->username?></option>
                            <?php endforeach; ?>
                        </select>
                    </div>
                </div>
                <div class="layui-form-item">
                    <div class="layui-input-block">
                        <button type="submit" class="layui-btn submit" data-id="1">确定</button>
                    </div>
                </div>
            </form>
        </div>
    </div>
</div>

<script src="/static/layim-v3.7.6/src/layui.js"></script>
<script>
// 随机昵称
let names = ["任云踪","悟剑声"," 红流邪少","黑衣剑少","白衣剑少","殢无伤","号天穷","靖沧浪","宿贤卿","魔王子","戢武王","剑之初"," 慕容情","愁未央","千叶传奇","赤子心（鬼谷晏）","无衣师尹、鬼谷藏龙、惜夫人、擎海潮、罪剑刑己","劫随","玉权臣","丘伯","撒手慈悲","禁天妖肃","拂樱斋主（凯旋侯）","禳命女","咒世主","太息公","机会者","破坏者","替代者","志满天","烨世兵权","失路英雄","南风不竞","求影十锋","死国之神","天者","地者","阿修罗","神之子","夜神","鬼狱邪神","九妖翼姬","黑暗冷爵","银月贪狼","无界尊皇","仲裁者","寒烟翠","莎莉罕","无执相","香独秀","弃天帝","苍月银血","火狐夜麟(黄泉)","幽溟","爱染嫇娘","百罹刑迹","笑剑钝","醉饮黄龙","刀无极","炎炽凤羽、独孤残剑、冷夜残心、刁、邪锋绝刀","啸日猋","枫岫主人","少独行","罗喉","君曼睩","九界佛皇","天蚩极业","爱祸女戎 ","阴端佛鬼","逆吾非道","异法无天","邪说沦语","问天敌","曲指邪怒","夜暴双镰","梦语独断","鬼艳织香","勾首紫蜒","骨讽蓝嚣","玩命丑笑","天堂之萼","夸诞冥生","氤伞乌霾","病色哀歌","禁种虫父","养骨者","六轮鬼贼","销骨箕伯","九阴魔蝎","叛经恶蠹","沧海平","刀无形","刀无我","刀无心","玉刀爵","御不凡","炎龙","天武师","地武师","人武师","春雨","夏雷","玉秋风","冬雪","夜风行","悲雨泣","流水心","月光吟","寒冰语","孤影笑","川凉剑夫","钢翼飞猿","独孤遗恨","冥河画匠","卷三宗","权妃","妖后","明月心","四无君","策谋略","黑鹰","战雕","地煞","月鸣孤魂","妖刀帅","刃奇书","刀魁","刀将","天忌","凯","定风愁","一字师","郭财临","虎仔","炮仔","阿泽仔","猫仔","瓠仔","薛厝边","云袖","赦木年","断水刃","释无念","无悲","苦释尊者","怒杀","残命","凶煞","裂魂","夺魄","不明","不白","大忍戒怒","大定藏海","大原照宇","大悲忏慧","大慈化裟","披魂纱","雅瑟风流","欲苍穹","风凌韵","箭翊","冀小棠","道释尊者","毒蝎女","遗世老","巫剑舟","骨冷笑","异端神","越剑人","患无救","剑理","山涛君","海殇君","云岫君","亢无后","刑婆","力山","不戒僧","干儿","末情天","林震天","天山双霸","风雪生","渡金笙","夔神","夔萝","夔婴","雷公婴","龙琴一品","观世局","瑟残影","魔族精卫","劫无形","潇湘子","疯魔乱道","红目枝","归元圣童","血泣噬道","触念来","屠力金","诛形银","杀气铜","长桑鬼陀","变相来","因果来","圣贤诸","上官知礼","广文诸","风雅诸","白阳子","金阳子","墨阳子","夜笑埋道","执道行","蓝蝎哭道","孝文","魔魁之女","天督","地宰","灵啸月","夫子","玉槐相士","秤命客","补运仙","道尊","老佛","太极道君","无极道君","白滴子","鹤岗","鹤原","不知名","玄真君","剑心","剑胆","太真君","元真君","鹤元","百里抱信","南宫布仁","释丹凤","天理老人","风随行","空劫","曹百哀","心残","超天五行者","追音老叟","阴柳双姬","天际双星","勾肠剑","沙罗教主","武宗魁","鬼符灯","梅香居士","柳全真","古太虚","巫上玄","九恶道","娑罗七鬼","劫成念","毒炽盛","无我相","尊天印","双运行","法上观","梦杀升","布云广","容正弘","形而上","抑制无极","表象意魔","促音褊邪","赤钹哀音","炉火狭爱","传动怒生","桀黠味毒","执戒律","教世音","残缺暴霸","虿尾恶露","藏原","应无私","精灵四魂","慈航渡","谄佞迷妖","正传","业途灵","泰气弥陀","极元弥陀","耆宿期","晖光德","跃动四象","急追五令","轮转六嫦","傲性七夷","侯贯清","众生见","空妙有","数循环","曲宿全","渡岸舟","千良和","了无音","燕渡关","佛莲","大圆觉","辅天","宿斗老人","地冥至尊","今生一剑","钗头凤","赛迁","沐昭光","腹中首","缺心","太黄君","阴间**师","阴冥皇","箭无形","彩绫","花信风","火云姑","哀三声","风采铃","秋分","秋别","寒夜残灯","刀兽","剑禽","骨蚍","彩纹蝶","圣上儒","灯蝶","一页书","冒百然","泣花郎","迷蝶","断罪业","离恶障","百里泣","枭蝶","傲八方","春意厚","唤魂丧","狄萧","雾谷老人","一休禅师","阿修罗主宰","血吻蝶","织梦师","聂天官","诛十七","花非花","金小开","万世因","双面刀鬼","鬼计连环","缺哈多","追影鬼仆","满江红","掩日光","鬼藏智","藏智鬼","智鬼藏","鬼智藏","智藏鬼","藏鬼智","常惠恩","恨今生","半人龙","恶魂暴鬼","竹虚","半邪郎","玩命浪子","花影人","天下第一棺","痴虫","毒王","孔识藏","命七天","半边分","紫束白","关足天","圆流","圆宿薄","渡入迷","崎路人","宫布衣","纱四郎","通瑶池","五方罗刹","呼三叹","八面狼姬","万俟焉","灵心异佛","蓝晶人","枯叶","沙漠五僧","回元三圣","刺发无常","笑面无常","孔飙达","天鹰大帝","天鹰公主","天吊神","何世宗","黑时雨","何三色","金牌大执法","无色佛","欧阳艮","诸葛坤","不死僧","天愁客","百里飞首","符仔仙","修仇休","紫金花","战二郎","一钱一命","五妃","无道教妈","长生佛","五剑雕郎","飞鸿仙子","逐云仙子","孔雀王朝郡主","叶小钗","萧竹盈","金羽兰","金童","银女","望星子","视月能","观日生","一剑万生","一刀万杀","血手魔魁","半月郎君","七狐仙","文武太皇","主席夫人","时空超越人","童颜未老人","半驼废","九指挪吒","绿面金刚","火麒麟","蚕眉金豹","赤眼银葱","沧海圣老","盖天公","普九年","太原古人","白文采","素云流","管千岳","荫尸人","魔姑","鬼叟","尘不染","谈无欲","黑珍珠","仇恨怨止","恩情爱休","无常人","欧阳上智","谈笑眉","怒斩","沙人畏","欧阳翎","一点红","欧阳尚智","敖乙","信天翁","昆仑上人","金少爷","照世明灯","唐飞虹","唐七七","唐飞宇","唐飞鹏","万点神拳","千臂魔君","冠天星","火阳真君","流星君","代行姥姥","太虚子","玄虚子","火云公","了情师太","识悟大师","长眉真人","青竹公","紫冉客","华山一剑","龙凤双侠","鬼智灵童","飞狼","魔灵杀素","万变魔女","蟒中龙","秦假仙","独眼龙","化丑","藏镜人","网中人","黑白郎君","素还真","宇文天","冷剑白狐","一线生","霹雳公","碧眼天枭","半天鹰","金太极","紫霹雳","小金刚","小玄元","欧阳琳","剑藏玄","花风云","恨海主宰","弯月","心海主宰","欲海主宰","怒海主宰","情海主宰","银刀太妹","蜕变妖郎","凤飘飘","绯羽怨姬","断风尘","孟白云","楼无痕","赭杉军","东宫神玺","史波浪","天草二十六","伏婴师"];
let len = names.length;
document.getElementById("rankName").addEventListener("click", ()=>{
    let i = Math.floor(Math.random() * len);
    document.getElementsByTagName("input")[0].value = names[i]
})

//
var $;
layui.use(["form","element"],function () {
    $ = layui.jquery;
});

//创建WebSocket
var ws = new WebSocket('ws://175.178.37.3:8484');
ws.onopen = function() {
    console.log("【login】 websocket: connection");
}
ws.onclose = function() {
    console.log("【login】 websocket: onclose");
}
ws.onerror = function () {
    console.log("【login】 websocket: onerror");
};
ws.onmessage = function(evt) {
    console.log("【login】 websocket onmessage");
    console.log(evt.data);
    if (evt.data) {
        let data = JSON.parse(evt.data);
        if (data.id && data.username) {
            $.post("/user/doLogin", data, function (msg) {
                if (msg.code == 0) {
                    window.location.href = "/index/index";
                }
            }, "json")
        }
    }
}


// 表单提交
let el = document.getElementsByClassName("submit");
for (let i= 0; i < el.length; i++) {
    el[i].addEventListener("click", ()=>{
        let form = document.getElementsByTagName("form")[i];
        let arr = serialize(form);
        arr["type"] = "login";
        let str = JSON.stringify(arr);
        ws.send(str);
    })
}

//表单提序列化
function serialize(form) {
    let parts = {};
    let optValue;
    for (let field of form.elements) {
        switch(field.type) {
            case "select-one":
            case "select-multiple":
                if (field.name.length) {
                    for (let option of field.options) {
                        if (option.selected) {
                            if (option.hasAttribute){
                                optValue = (option.hasAttribute("value") ?
                                    option.value : option.text);
                            } else {
                                optValue = (option.attributes["value"].specified ?
                                    option.value : option.text);
                            }
                            //parts.push(encodeURIComponent(field.name) + "=" + encodeURIComponent(optValue));
                            parts[encodeURIComponent(field.name)] = encodeURIComponent(optValue);
                        }
                    }
                }
                break;
            case "undefined":
            case "file":
            case "submit":
            case "reset":
            case "button":
                break;
            case "radio": // 单选按钮
            case "checkbox": // 复选框
                if (!field.checked) {
                    break;
                }
            default:
                // 不包含没有名字的表单字段
                if (field.name.length) {
                    //parts.push(`${encodeURIComponent(field.name)}=` + `${encodeURIComponent(field.value)}`);
                    parts[encodeURIComponent(field.name)] = encodeURIComponent(field.value);
                }
                break;
        }
    }
    return parts;
    //return parts.join("&");
}
</script>
</body>
</html>
